<!--
 * @Author: White
 * @description: 面包屑组件
 * @LastEditTime: 2021-06-24 16:53:07
-->

<template>
    <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item,index) in breadList"
            :key="index"
            :to="{ path: item.meta.path }">
            {{ $t(`routeName.${item.meta.en}`) }}
          </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data: () => ({
        breadList: [],
    }),
    created() {
        this.getBreadcrumb()
    },
    watch: {
        $route() {
            this.getBreadcrumb()
        }
    },
    methods: {
        isHome(route) {
            return route.path === "/home";
        },
        getBreadcrumb() {
            let matched = this.$route.matched;
            //如果不是首页
            if (!this.isHome(matched[0])) {
                matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
            }
            this.breadList = matched.filter(item => item.meta.title);
        },
    }
}
</script>
